@import '~@/styles/theme.less';

.fabric-create-org {
  height: 100%;
  background-color: #fff;
  .btn {
    text-align: center;
  }
  .buy-btn {
    width: 200px;
    height: 38px;
    background: @primary-color;
    color: #fff;
    &:hover{
      background: @hoverColor;
    }
    &:active{
      background: @activeColor;
    }
    &:disabled{
      background: #F5F5F5;
      border: 1px solid #D9D9D9;        
      cursor: not-allowed;
    }
  }
  .ant-tabs {
    height: 100%;
  }
  .ant-tabs-bar {
    margin: 0;
    border-bottom: none;
  }
  .ant-tabs-bottom > .ant-tabs-nav,
  .ant-tabs-bottom > div > .ant-tabs-nav,
  .ant-tabs-top > .ant-tabs-nav,
  .ant-tabs-top > div > .ant-tabs-nav {
    margin: 0 0 0px !important;
  }
  

  .tabs-wrapper {
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    flex: 1;
    padding: 24px 32px 32px 32px;
    .peer-check{
      margin-left: 90px;
      font-size:12px;
      font-weight:400;
      color:rgba(23,30,45,0.65);
      line-height:22px;
      button{
        width:64px;
        height:22px;
        border-radius:2px;
        font-size:12px;
        font-weight:400;
        color:rgba(255,255,255,1);
        padding: 0;
        margin-left: 8px;
      }
    }
  }
  .current-info {
    width: 368px;
    margin-left: 24px;
    padding: 24px 32px 32px 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    .info {
      margin: 22px 0 18px 0;
      .item-info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        line-height: 22px;
        margin-bottom: 4px;
        .item-text {
          width: 107px;
          font-size: 12px;
          font-weight: 400;
          color: rgba(23, 30, 45, 0.45);
        }
        .item-value {
          flex: 1;
          font-size: 12px;
          font-weight: 400;
          color: rgba(23, 30, 45, 1);
          text-align: right;
        }
        &:last-child {
          height: 40px;
          line-height: 40px;
          margin-top: 25px;
          .item-value {
            font-size: 32px;
            font-weight: 500;
            color: @primary-color;
            .symbol {
              font-size: 20px;
            }
          }
        }
      }
      .diver {
        width: 100%;
        height: 1px;
        background: #efefef;
        margin: 16px 0;
      }
    }
  }
  .ant-tabs-content {
    height: 100%;
    min-height: 100%;
    display: flex;
    width: 100%;
  }
  .create-form {
    margin-top: 24px;
    .ant-form-item {
      margin-bottom: 16px;
      &:last-of-type {
        margin-bottom: 0px;
      }
      
      .ant-form-item-control {
        line-height: 30px;
      }
      .radio-group {
        display: flex;
        .view {
         width: 72px;
         height:32px;
         cursor: pointer;
         line-height: 30px;
         border: 1px solid #D9DDE0;
         font-size:12px;
         text-align: center;
         font-weight:400;
         color:#171E2D;
         transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;
         &:focus-within {
            box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.08);
        }
         &:first-of-type{
            border-radius:2px 0px 0px 2px;
         }
         &:last-of-type{
            border-radius:0px 2px 2px 0px;
         }
         &:not(:first-of-type){
            margin-left: -1px;
         }
        }
        .view-select{
            border: 1px solid @primary-color;
            position: relative;
            z-index: 1; 
            color: @primary-color;
            background-color: #cbe2de;
        }
        .view:hover {
         border-color: @primary-color;
         position: relative;
         z-index: 1;
        }
       }
      .ant-input-number {
        // border: 1px solid #d9dde0;

        width: 88px;
        &:hover {
          border-color: @primary-color;
        }
      }
      .ant-input-number-input {
        padding: 0 12px;
        font-family: HelveticaNeu;
      }
      .ant-input-number-handler-wrap {
        .ant-input-number-handler {
          color: rgba(23, 30, 45, 0.45);
        }
      }
      input {
        caret-color: #171e2d;
      }
    }
    .ant-form-item-has-error {
      .input {
        border-color: #e53232;
      }
    }
    .ant-form-item .ant-mentions,
    .ant-form-item textarea.ant-input {
      height: 88px;
      width: 320px;
    }
    .diver {
      width: 100%;
      margin: 24px 0px;
      background: #efefef;
      height: 1px;
    }
    
    
    .ca-wrapper {
      background: rgba(248, 248, 248, 1);
      border-radius: 2px;
      width: 828px;
      padding: 16px 24px 24px 24px;
      .ca-title {
        margin-bottom: 16px;
        padding-left: 16px;
        display: flex;
        div {
          width: 137px;
          margin-right: 12px;
          font-size: 12px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(23, 30, 45, 0.65);
          line-height: 22px;
          &:nth-of-type(3) {
            width: 121px;
          }
          &:nth-of-type(4) {
            width: 121px;
          }
        }
      }
      .ca-form-wrapper {
        background: rgba(255, 255, 255, 1);
        .ca-form {
          padding: 10px 16px 9px 16px;
          border-bottom: 1px solid #efefef;
          font-size: 12px;
          .ant-form-item {
            margin-bottom: 0px;
            input {
              padding: 5px 9px;
            }
          }
          .ant-form-item-has-error .ant-form-item-explain,
          .ant-form-item-has-error .ant-form-item-split {
            color: #e53232;
          }
        }
        .result {
          .ant-form-item-explain {
            display: none;
          }
        }
        .test-peer {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          height: 32px;
          padding: 0px !important;
          border: none;
        }
        .delete {
          cursor: pointer;
          position: absolute;
          right: -8px;
          top: 8px;
        }
      }
      .create-peer {
        background: rgba(255, 255, 255, 1);
        border-radius: 2px;
        height: 32px;
        line-height: 30px;
        margin-top: 16px;
        cursor: pointer;
        border: 1px dashed rgba(217, 217, 217, 1);
        font-size: 12px;
        text-align: center;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(23, 30, 45, 0.65);
        img {
          margin-right: 8px;
          margin-top: -2px;
        }
        &:hover {
          border-color: @primary-color;
        }
      }
    }
    .ant-input:focus,
    .ant-input-focused {
      border-color: @primary-color !important;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
    }
    .submit {
      margin: 16px 0 16px 90px;
    }
  }
  .ant-form-item-has-error .ant-form-item-explain,
  .ant-form-item-has-error .ant-form-item-split {
    color: rgb(229, 50, 50);
  }
  
  .vote-item{
    .ant-input-number{
      position: relative;
      &:after{
        position: absolute;
        content: '%';
        right: -20px;
        top: 3px;
        font-size:12px;
        font-family:HelveticaNeue;
        color:rgba(23,30,45,0.6);
      }
    }
  }
  .bare-form {
    .ant-form-item-label > label {
      width: 81px;
    }
  }
}
.fabric-create-peer {
  .create-form {
    position: relative;
    .ant-form-item-label > label {
      width: 72px;
    }
    .submit {
      margin-left: 90px;
      margin-bottom: 16px;
    }
  }
  .bare-form {
    .ant-form-item-label > label {
      width: 83px;
    }
  }
  .percent {
    padding-left: 6px;
    font-size: 12px;
    color: rgba(23, 30, 45, 0.6);
  }
}
.fabric-create-league {
  .create-form {
    position: relative;
    .ant-form-item-label > label {
      width: 132px;
    }
    .create-org-text {
      font-size: 12px;
      font-weight: 400;
      color: @primary-color;
      margin-left: 12px;
      cursor: pointer;
      top: -100%;
    }
    .ant-select-multiple .ant-select-selector {
      border: 1px solid #d9dde0;
      border-radius: 4px;
      &:hover {
        border-color: @primary-color;
      }
    }
    .ant-select-multiple .ant-select-selection-item {
      height: 22px;
      margin-top: 3px;
      margin-bottom: 3px;
      padding: 0 8px 0px 8px;
      line-height: 20px;
      background: #f3f3f3;
      border: 1px solid #d9dde0;
      font-size: 12px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
    }
    .ant-form-item-has-error
      .ant-select:not(.ant-select-borderless).ant-select-open
      .ant-select-selector,
    .ant-form-item-has-error
      .ant-select:not(.ant-select-borderless).ant-select-focused
      .ant-select-selector {
      box-shadow: none;
    }
    .ant-form-item-has-error {
      .ant-select-multiple .ant-select-selector {
        border-color: #e53232 !important;
      }
    }
  }
}
